<template>
	<div class="musicbg">
		<div class="music">
			<div class="musicLeft">
				<div class="musicBox">
					<div class="cdImage">
						<img :src="musicImg" alt="" />
						<span></span>
					</div>
					<div class="musicText">
						<div class="title">
							<i class="lab"></i>
							<div class="tit">
								<em>{{ musicinfo.title }}</em>
								<a href="javascript" title="播放mv">
									<i class="icn"></i>
								</a>
								<div class="subtit">{{ musicinfo.viceTil }}</div>
							</div>
						</div>
						<p class="des">
							歌手：<span :title="musicinfo.name"
								><a href="javascript">{{ musicinfo.name }}</a></span
							>
						</p>
						<p class="des">
							所属专辑：<a href="javascript">{{ musicinfo.album }}</a>
						</p>
						<div class="btns">
							<a href="javascript:;" class="addply" title="播放">
								<i><em class="ply"></em>播放</i>
							</a>
							<a
								href="javascript:;"
								class="btni add"
								@click="addplay"
								title="添加到播放列表"
							></a>
							<a href="javascript:;" class="btni btni-share">
								<i>分享</i>
							</a>
							<a href="javascript:;" class="btni btni-fav">
								<i>收藏</i>
							</a>
							<a href="javascript:;" class="btni btni-dl">
								<i>下载</i>
							</a>
							<a href="javascript:;" class="btni btni-cmmt">
								<i>(123456)</i>
							</a>
						</div>
						<ul :class="[isShow ? 'text text-open' : 'text']">
							<li v-for="item in lyrics" :key="item.id">
								{{ item }}
							</li>
						</ul>
						<div :class="[isShow ? 'crl crl-show' : 'crl']" @click="setIsShow">
							<a href="javascript:;">
								展开
								<i class="u-icn"></i>
							</a>
						</div>
					</div>
				</div>
				<div class="musicComment">
					<div class="comments">
						<div class="title">
							<h3>评论</h3>
							<span class="sub">共<span>211774</span>条评论</span>
						</div>
						<div class="comment">
							<div class="iptarea">
								<div class="img">
									<img src="@/image/111.jpg" alt="" />
								</div>
								<div class="flag">
									<div class="txtwrap">
										<textarea class="txt" placeholder="评论"></textarea>
									</div>
									<div class="btns">
										<i class="icn icn-1"></i>
										<i class="icn icn-2"></i>
										<a href="javascript:;" class="btn">评论</a>
										<span>140</span>
									</div>
									<div class="corr"></div>
								</div>
							</div>
							<div class="comList">
								<h3>最新评论</h3>
								<div v-for="item in musiccomment" :key="item.id" class="item">
									<div class="head">
										<a href="javascript:;"
											><img :src="item.user.avatarUrl" alt=""
										/></a>
									</div>
									<div class="cntwrap">
										<div class="cnt">
											<a href="javascript:;"> {{ item.user.nickname }} </a>：{{
												item.content
											}}
										</div>
										<div class="rp">
											<span class="time">{{ item.timeStr }}</span>
											<a href="javascript:;"> <i class="icn"></i> (3201) </a>
											<span class="sep">|</span>
											<a href="javascript:;">回复</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="musicRight">
				<ul class="similarMusic">
					<h3>相似歌曲</h3>
					<li v-for="item in similar" :key="item.id">
						<div class="txt">
							<div class="musicName">
								<a
									href="javascript:;"
									@click="setPaly"
									:data-id="item.id"
									:title="item.name"
								>
									{{ item.name }}
								</a>
							</div>
							<div class="musicSinger">
								<a href="javascript:;">{{ item.artists[0].name }}</a>
							</div>
						</div>
						<div class="opr">
							<a
								href="javascript:;"
								@click="setPaly"
								:data-id="item.id"
								class="play"
							></a>
							<a href="javascript:;" class="add"></a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<Btmbar></Btmbar>
	<BtmbarView></BtmbarView>
</template>

<script>
export default {
	name: "MusicView",
	components: "{}",
};
</script>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { musicLyric, musicComment, musicDetail, simiMusic } from "@/api/Music";

const route = useRoute();
const router = useRouter();
const store = useStore();

const musicList = computed(() => store.state.app.musicList);
const musicId = ref(0);
const sid = ref(0);
const musiccomment = ref([]);
const similar = ref([]);
const lyrics = ref([]);
const musicImg = ref("");
const musicinfo = {
	title: ref(""),
	viceTil: ref(""),
	name: ref(""),
	mvId: ref(0),
	album: ref(""),
};
const isShow = ref(false);

onMounted(() => {
	getMusicLyric();
	getMusicComment();
	getMusicDetail();
	getSimiMusic();
});

const getMusicLyric = async () => {
	const data = await musicLyric(musicId.value);
	const lyricList = data.lrc.lyric.split("\n");
	lyrics.value = lyricList.map((item) => {
		const exp = /\[.*\]/g;
		const newItem = item.replace(exp, "");
		if (!newItem) return;
		return newItem;
	});
	lyrics.value.pop();
	lyrics.value.pop();
};
const getMusicComment = async () => {
	const data = await musicComment(musicId.value, 30, 1);
	musiccomment.value = data.comments;
};
const getMusicDetail = async () => {
	const data = await musicDetail(musicId.value);
	musicinfo.title.value = data.songs[0].name;
	musicinfo.name.value = data.songs[0].ar[0].name;
	musicImg.value = data.songs[0].al.picUrl;
	musicinfo.mvId.value = data.songs[0].mv;
	musicinfo.album.value = data.songs[0].al.name;
	musicinfo.viceTil.value = data.songs[0].alia[0];
};
const getSimiMusic = async () => {
	const data = await simiMusic(musicId.value);
	similar.value = data.songs;
};
const setIsShow = () => {
	isShow.value = !isShow.value;
};

const setPaly = (e) => {
	sid.value = e.target.dataset.id;
	router.push({ path: "/music", query: { id: sid.value } });
};

const infoAll = () => {
	getMusicLyric();
	getMusicComment();
	getMusicDetail();
	getSimiMusic();
};

const addplay = () => {
	musicList.value.push(musicId.value);
	const setList = new Set(musicList.value);
	const newMusic = [...setList];
	console.log(newMusic);
	store.dispatch("app/musiclist", newMusic);
};

watch(
	route,
	(route) => {
		musicId.value = route.query.id;
		infoAll();
	},
	{
		immediate: true,
		deep: true,
	}
);
</script>

<style lang="less" scoped>
.musicbg {
	min-width: 982px;
	background: #f5f5f5;
}
.music {
	display: flex;
	width: 980px;
	min-height: 700px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid #d3d3d3;
	background: #ffffff;
	border-width: 0 1px;
	.musicLeft {
		box-sizing: border-box;
		width: calc(100% - 270px);
		padding: 47px 30px 40px 39px;
		border-right: 1px solid #d3d3d3;
		overflow: hidden;
		.musicComment {
			overflow: hidden;
			box-sizing: border-box;
		}
		.musicBox {
			overflow: hidden;
			margin-bottom: 40px;
			.cdImage {
				position: relative;
				float: left;
				width: 198px;
				height: 198px;
				margin-right: 8px;
				img {
					width: 130px;
					height: 130px;
					margin: 34px;
				}
				span {
					position: absolute;
					width: 206px;
					height: 205px;
					top: -4px;
					left: -4px;
					background: url(@/image/coverall.png) no-repeat -140px -580px;
				}
			}
			.musicText {
				float: right;
				width: 414px;
				.title {
					overflow: hidden;
					.lab {
						float: left;
						width: 54px;
						height: 24px;
						display: inline-block;
						overflow: hidden;
						vertical-align: middle;
						background: url(@/image/icon.png) no-repeat 0 -463px;
					}
					.tit {
						margin-left: 64px;
						position: relative;
						top: -6px;
						font-size: 24px;
						em {
							margin-right: 7px;
							vertical-align: middle;
						}
						a {
							vertical-align: middle;
							width: 21px;
							height: 18px;
							display: inline-block;
							overflow: hidden;
							background: url(@/image/icon.png) no-repeat 0 -18px;
						}
						.subtit {
							margin: 1px 0 5px;
							color: #bababa;
							font-size: 14px;
							vertical-align: middle;
						}
					}
				}
				.des {
					margin: 10px 0;
					color: #999;
					a {
						color: #0c73c2;
					}
					a:hover {
						text-decoration: underline;
					}
				}
				.text {
					height: 299px;
					margin-top: 13px;
					line-height: 23px;
					overflow: hidden;
					li {
						margin-top: 6px;
					}
				}
				.text-open {
					height: auto;
				}
				.crl {
					margin-top: 5px;
					a {
						color: #0c73c2;
					}
					.u-icn {
						width: 11px;
						height: 8px;
						display: inline-block;
						overflow: hidden;
						vertical-align: middle;
						background: url(@/image/icon.png) no-repeat -65px -520px;
					}
				}
				.crl-show {
					.u-icn {
						background-position: -45px -520px;
					}
				}
			}
		}
	}
	.musicRight {
		box-sizing: border-box;
		width: 270px;
		padding: 20px 40px 40px 30px;

		h3 {
			position: relative;
			height: 23px;
			margin-bottom: 20px;
			border-bottom: 1px solid #ccc;
			color: #333;
		}
		li {
			margin-top: 10px;
			overflow: hidden;
			.txt {
				float: left;
				width: 156px;
				line-height: 16px;
				.musicName,
				.musicSinger {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-wrap: normal;
				}
				.musicSinger {
					a {
						color: #999;
						font-size: 12px;
					}
				}
			}
			.opr {
				float: right;
				position: relative;
				top: 10px;
				line-height: 32px;
				a {
					float: left;
					width: 10px;
					height: 11px;
					background: url(@/image/icon2.png) no-repeat -9999px -9999px;
					opacity: 0.9;
				}
				.play {
					margin-right: 16px;
					background-position: -69px -455px;
				}
				.add {
					background-position: -87px -454px;
				}
			}
		}
	}
}
a:hover {
	text-decoration: underline;
}
.comments {
	margin-top: 40px;
	.iptarea {
		margin-top: 20px;
		.img {
			float: left;
			width: 50px;
			height: 50px;
			margin-right: -100px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.flag {
			margin-left: 64px;
			position: relative;
			.txtwrap {
				padding-right: 14px;
				.txt {
					width: 100%;
					height: 50px;
					margin-right: -20px;
					padding: 5px 6px 6px;
					border: 1px solid #cdcdcd;
					border-radius: 2px;
					line-height: 19px;
					box-sizing: content-box;
					outline: none;
					font-size: 12px;
					color: #333;
					font-family: Arial, Helvetica, sans-serif;
					resize: none;
					overflow: auto;
				}
			}
			.corr {
				position: absolute;
				top: 14px;
				left: -5px;
				width: 8px;
				height: 8px;
				border: 1px solid #cdcdcd;
				border-right-color: transparent;
				border-top-color: transparent;
				background: #fff;
				transform: rotate(45deg);
			}

			.btns {
				overflow: hidden;
				padding-top: 10px;
				.icn {
					float: left;
					width: 18px;
					height: 18px;
					margin: 0px 10px 0 0;
					cursor: pointer;
					background: url(@/image/icon.png) no-repeat 0 9999px;
				}
				.icn-1 {
					background-position: -40px -490px;
				}
				.icn-2 {
					background-position: -60px -490px;
				}
				.btn {
					float: right;
					width: 46px;
					height: 25px;
					color: #fff;
					text-align: center;
					line-height: 25px;
					background: url(@/image/www.png) no-repeat 0 9999px;
					background-position: -84px -64px;
				}
				span {
					float: right;
					margin-right: 10px;
					line-height: 25px;
				}
			}
		}
	}
	.comList {
		margin-top: 20px;
		h3 {
			position: relative;
			top: 1px;
			height: 20px;
			font-size: 12px;
			border-bottom: 1px solid #cfcfcf;
		}
		.item {
			padding: 15px 0;
			border-top: 1px dotted #ccc;
			.head {
				float: left;
				width: 50px;
				height: 50px;
				margin-right: -100px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.cntwrap {
				margin-left: 60px;
				.cnt {
					width: 100%;
					overflow: hidden;
					line-height: 20px;
					word-break: break-word;
					a {
						color: #0c73c2;
						margin-right: 5px;
					}
				}
				.rp {
					margin-top: 15px;
					text-align: right;
					.time {
						float: left;
						margin: 0 !important;
						color: #999;
					}
					a {
						.icn {
							width: 15px;
							height: 14px;
							display: inline-block;
							overflow: hidden;
							margin-right: 5px;
							vertical-align: -2px;
							background: url(@/image/icon2.png) no-repeat 0 9999px;
							background-position: -150px 0;
						}
					}
					.sep {
						margin: 0 8px;
						color: #ccc;
					}
				}
			}
		}
	}
}

.btns {
	height: 31px;
	margin-bottom: 25px;
	overflow: hidden;
	.btni {
		float: left;
		height: 31px;
		line-height: 30px;
		padding: 0 5px 0 0;
		min-width: 23px;
		cursor: pointer;
		color: #333;
		text-decoration: none;
		font-family: simsun, \5b8b\4f53;
		background: url(@/image/button2.png) no-repeat 0 9999px;
		i {
			float: left;
			height: 31px;
			line-height: 30px;
			min-width: 23px;
			cursor: pointer;
			background: url(@/image/button2.png) no-repeat 0 9999px;
		}
	}
	.addply {
		display: inline-block;
		float: left;
		height: 31px;
		line-height: 31px;
		padding: 0 5px 0 0;
		color: #fff;
		vertical-align: top;
		text-align: center;
		white-space: nowrap;
		background: url(@/image/button2.png) no-repeat 0 9999px;
		background-position: right -428px;
		i {
			display: inline-block;
			height: 31px;
			line-height: 31px;
			padding: 0 7px 0 8px;
			background: url(@/image/button2.png) no-repeat 0 9999px;
			background-position: 0 -387px;
			overflow: hidden;
			em {
				float: left;
				width: 20px;
				height: 18px;
				margin: 6px 2px 2px 0;
				background: url(@/image/button2.png) no-repeat 0 9999px;
				background-position: 0 -1622px;
				overflow: hidden;
			}
		}
	}
	.add {
		width: 31px;
		margin-left: -3px;
		margin-right: 5px;
		padding-right: 0;
		background-position: 0 -1588px;
	}
	.btni-fav {
		background-position: right -1020px;
		margin-right: 6px;
		i {
			padding-right: 2px;
			padding-left: 28px;
			background-position: 0 -977px;
		}
	}
	.btni-share {
		background-position: right -1020px;
		margin-right: 6px;
		i {
			padding-right: 2px;
			padding-left: 28px;
			background-position: 0 -1225px;
		}
	}
	.btni-dl {
		margin-right: 6px;
		background-position: right -1020px;
		i {
			padding-right: 2px;
			padding-left: 28px;
			background-position: 0 -2761px;
		}
	}
	.btni-cmmt {
		margin-right: 6px;
		background-position: right -1020px;
		i {
			padding-right: 2px;
			padding-left: 28px;
			background-position: 0 -1465px;
		}
	}
}
</style>
